<!--
 * @LastEditors: 杜康
 * @LastEditTime: 2021-11-17 15:40:40
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AntV - G6</title>
</head>

<body>
  <!-- 1、创建容器 -->
  <div id="mountNode"></div>
  <!-- CDN引入AntV G6 -->
  <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.7.1/dist/g6.min.js"></script>
  <script>
    // 2、数据准备
    const data = {
      // 点集
      nodes: [{
          id: 'node1', // String，该节点存在则必须，节点的唯一标识
          x: 100, // Number，可选，节点位置的 x 值
          y: 200, // Number，可选，节点位置的 y 值
        },
        {
          id: 'node2', // String，该节点存在则必须，节点的唯一标识
          x: 300, // Number，可选，节点位置的 x 值
          y: 200, // Number，可选，节点位置的 y 值
        },
      ],
      // 边集
      edges: [{
        source: 'node1', // String，必须，起始点 id
        target: 'node2', // String，必须，目标点 id
      }]
    }
    // 3、创建关系图
    const graph = new G6.Graph({
      container: 'mountNode',
      width: 800,
      height: 500
    })
    // 4、配置数据，渲染数据
    graph.data(data)
    graph.render()
  </script>
</body>

</html>